/*
 * @Description
 * @Author hanl
 * @Date 2024-07-04 10:40:13
 * @LastEditors hanl
 * @LastEditTime 2024-07-04 10:40:33
 */

import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'
import transformerDirectives from '@unocss/transformer-directives'
import transformerVariantGroup from '@unocss/transformer-variant-group'
import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx'
import { presetUseful } from 'unocss-preset-useful'

import { FileSystemIconLoader } from 'unplugin-icons/loaders'

/** unocss config */
export default () => defineConfig({
  cli: {
    entry: {
      patterns: ['src/**/*.{vue,ts,tsx}'],
      outFile: './unocss.css'
    }
  },

  content: {
    pipeline: {
      include: [
        // the default
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html|scss|sass)($|\?)/,
        // include js/ts files
        'src/**/*.{js,ts}',
      ],
      // exclude files
      exclude: [
        'node_modules',
        '.git',
        '.github',
        '.husky',
        '.vscode',
        'vite',
        'dist',
        'mock',
        'public',
      ],
    },
  },

  transformers: [
    /** 识别apply */
    transformerDirectives(),

    /** 防止报错 */
    transformerVariantGroup(),

    /** 支持jsx */
    transformerAttributifyJsx()
  ],

  shortcuts: {
    'wh-full': 'w-full h-full',
    'flex-center': 'flex justify-center items-center',
    'flex-col-center': 'flex-center flex-col',
    'flex-x-center': 'flex justify-center',
    'flex-y-center': 'flex items-center',
  },

  /** 预设 */
  presets: [
    presetUseful({
      theme: {
        extend: {
          animation: {
            'spin-loading': 'spin-loading-keyframes 2s ease-in-out infinite'
          },

          keyframes: {
            'spin-loading-keyframes': {
              '0%': { 'box-shadow': '0 0 0 0   , 40px 0,-40px 0,0 40px,0 -40px' },
              '10%': { 'box-shadow': '0 0 0 0   , 12px 0,-40px 0,0 40px,0 -40px' },
              '20%': { 'box-shadow': '0 0 0 4px , 0px  0,-40px 0,0 40px,0 -40px' },
              '30%': { 'box-shadow': '0 0 0 4px , 0px  0,-12px 0,0 40px,0 -40px' },
              '40%': { 'box-shadow': '0 0 0 8px , 0px  0,  0px 0,0 40px,0 -40px' },
              '50%': { 'box-shadow': '0 0 0 8px , 0px  0,  0px 0,0 12px,0 -40px' },
              '60%': { 'box-shadow': '0 0 0 12px, 0px  0,  0px 0,0  0px,0 -40px' },
              '70%': { 'box-shadow': '0 0 0 12px, 0px  0,  0px 0,0  0px,0 -12px' },
              '80%': { 'box-shadow': '0 0 0 16px, 0px  0,  0px 0,0  0px,0  0px ' },
              '90% 100%': { 'box-shadow': '0 0 0 0   , 40px 0,-40px 0,0 40px,0 -40px' }
            }
          }
        },
      }
    }) as any,

    /** 属性化模式 & 无值的属性模式 */
    presetAttributify(),
    /** 默认预设 */
    presetUno(),
    /** 更改默认单位 */
    presetRemToPx(),

    /** 解析svg图标 */
    presetIcons({
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
        // ...
      },
      collections: {
        local: FileSystemIconLoader('./src/assets/icons', (svg) => {
          return svg.replace(/^<svg /, '<svg fill="currentColor" ')
        }),
      },
    }),
  ],
})
